$(function () {
  $('#title').on('keydown', function (event){
    // 按下回车键
    if(event.keyCode == 13){
      if($(this).val() == ''){
        alert('请输入内容！');
        return;
      }
      var data = getData();
      data.push({
        title: $(this).val(),
        done: false
      });
      $(this).val('');
      saveData(data);
      render();
    }
  });

  // 复选框勾选时的委托点击事件
  $('ol, ul').on('click', 'input', function () {
    var index = $(this).siblings('a').attr('id');
    var data = getData();
    data[index].done = $(this).prop('checked');
    saveData(data);
    render();
  });

  // 删除按钮的委托点击监听
  $('ol, ul').on('click', 'a', function () {
    var index = $(this).prop('id');
    var data = getData();
    data.splice(index, 1);
    saveData(data);
    render();
  })

  $('.clear').click(function () {
    removeData();
    render();
  })

  // 初始渲染
  render();

  // 渲染数据到两个列表上
  function render () {
    var data = getData();
    var todo = 0;
    var done = 0;
    $('ol, ul').empty();
    $.each(data, function (index, item) {
      if(!item.done){
        todo++;
        $('ol').prepend("<li><input type='checkbox'><p>"+item.title+"</p><a href='javascript:;' id="+ index +">-</a></li>");
      }else {
        done++;
        $('ul').prepend("<li><input type='checkbox' checked='true'><p>"+item.title+"</p><a href='javascript:;' id="+ index +">-</a></li>")
      }
    });
    $('#todocount').text(todo);
    $('#donecount').text(done);
  }

  // 从localstorage中取数据
  function getData () {
    var list = localStorage.getItem('list');
    if(list == null) {
      return [];
    }else{
      return JSON.parse(list);
    }
  }
  
  // 往localstorage中存数据
  function saveData (data) {
    localStorage.setItem('list', JSON.stringify(data));
  }

  // 清空数据
  function removeData() {
    localStorage.removeItem('list');
  }

  $('#now').text(new Date().getFullYear())
})